<template>
	<gui-page ref="guiPage" :customHeader="true">
		<template v-slot:gHeader>
			<nav-bar-custom  :leftType="1" left-icon="left" @clickLeftBack="clickLeftBack" scanType="0" :title="$t('materials.transferRawMaterials')"  ></nav-bar-custom>
		</template>
		<template v-slot:gBody>
			<view class="page-auto">
				<!--原材料转移扫描条码-->
				<view class="custom-form-card">
					<view class="custom-card-title">
						<text class="title-line"></text>
						{{$t('materials.rawMaterialRransferScan')}}
					</view>
					<view class="custom-card-itemTwo" style="padding: 20rpx 0;">
						<text class="item-info-title" style="padding-right: 40rpx;"><text
								class="required-color">*</text>{{$t('distributedEnter.materialCoded')}}</text>
						<uni-easyinput class="uni-mt-5" suffixIcon="scan" v-model="data.materialCode" 
							type="search" :placeholder="$t('distributedOut.pleaseMaterial')" @confirm="confirm"
							@iconClick="iconClick">
						</uni-easyinput>
					</view>
				</view>
				<!-- card展示页面 -->
				<scroll-view :show-scrollbar="false" :scroll-y="true" class="scroll">
					<view style="height: 15rpx"></view>
					<view class="card-boxCustom" v-for="(list,index) in data.scanInfo" :key="index">
						<view class="card-body">
							<view class="custom-card-title">
								<text class="title-line"></text>
								{{$t('pageTranslation.plsScanBarcodeInfo')}}
							</view>
							<uni-icons class="close-icons" type="closeempty" color="#9C9C9C" size="30" @click="deletList(index,list)"></uni-icons>
							<view class="custom-card-itemOne">
								<text class="body-item-title">{{$t('distributedEnter.materialCoded')}}：</text>{{list.barcode}}
							</view>
							<view class="custom-card-itemOne">
								<text class="body-item-title">{{$t('distributedEnter.materialCode')}}：</text> {{list.materialCode}}
							</view>
							<view class="custom-card-itemOne">
								<text class="body-item-title">{{$t('distributedEnter.materialName')}}：</text> {{list.materialName}}
							</view>
							<view class="custom-card-itemOne">
								<view class="card-item-50">
									<text class="item-info-title">{{$t('distributedOut.warehouse')}}：</text>{{list.warehouseName}}
								</view>
								<view class="card-item-50">
									<text class="item-info-title">{{$t('distributedOut.location')}}：</text>{{list.locationCode}}
								</view>
							</view>
							<view class="custom-card-itemOne">
								<view class="card-item-50">
									<text class="item-info-title">{{$t('distributedEnter.uom')}}：</text>{{list.unit}}
								</view>
								<view class="card-item-50">
									<text class="item-info-title">{{$t('distributedEnter.qty')}}：</text>{{list.currentQty}}
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<!-- 底部操作栏按钮 -->
				<view class="page-bottom-box bottom-postion">
					<view class="page-bottomBtn bottomBtn-bgcolor-green" @click="submit">
						{{$t('calendar.submit')}}
					</view>
				</view>
			</view>
		</template>
	</gui-page>
</template>

<script setup>
	//引入文件
	import { navigate } from '@/utils/routerSkip.js';
	import { ref, reactive,onMounted ,computed,watch,toRaw} from "vue";
	import { getDataDictionaryFn } from '@/utils/index.js'
	import { selectBarcodeForTransfer,submitTransfer } from '@/api/api.js'
	import pdaScan from '@/hooks/pdaScan.js'
	import { useStore } from "vuex";
	import testVue from '../test/test.vue';
	import { basPdaOperationLogFn } from '@/utils/index.js';
	import { OPERATION_COMMIT, OPERATION_SCAN,OPERATION_DEL} from '@/constant/index.js'
	//JS国际化引入
	import { useI18n } from 'vue-i18n';
	const { t } = useI18n();

	let store = useStore();

	let data = reactive({
		materialCode: "",
		scanInfo:[], //当前扫描信息
	})

	// 数据存储到vuex
	data.scanInfo = computed(()=>{
		console.log(store.state.transferRawMaterialList,'data.scanInfo')
		return store.state.transferRawMaterialList
	})
	// 扫描条码引入
	const {scan}=pdaScan();

	onMounted(()=>{
		uni.$on('scancodedate', (data) => {
			console.log('获取到的code：' + data.code)
			getCode(data.code, 'pda')
		})
	})
	// 监听用户使用相机
	const iconClick= async (type)=>{
		if(type==='suffix'){
			let code=await scan();
			getCode(code,'scan')
		}
	}
	//扫描条码框,键盘回车
	const confirm = () => {
		getCode(data.materialCode,'keydown')
	}
	//获取code 
	const getCode= async (code,type)=>{
		// 存储扫描的的条码,通过barode去判断是否有重复
		let arr=data.scanInfo.filter(x=> x.barcode==code);
		if(arr.length>0){
			uni.showToast({title:t('smashRemoval.codesRepeatedly'),icon:'none'});
			return  
		}
		data.materialCode=code;
		let parmes = {
			barcode: code
		}
		let res = await selectBarcodeForTransfer(parmes)
		try {
			let inputParameter = JSON.stringify(parmes)
			let returnParameter = JSON.stringify(res)
			let operationPicture = '原材料转移'
			let callInterface = res.rquestUrl
			let opertionParmes = {
				inputParameter,
				returnParameter,
				operationPicture,
				callInterface,
				responseCode:res.status,//返回状态
				errorMessage:res.message,//错误信息
				isPass:res.status == 200 ? 'Y' : 'N',//是否成功 Y N
				operationType:OPERATION_SCAN
			}
			basPdaOperationLogFn(opertionParmes)
		} catch (error) {
		}
		if(res.status==200){
			data.scanInfo.push(res.data);
			// 成功将数据存储到vuex
			// store.commit('addTransferRawMaterialList',data.scanInfo)
		}else{
			uni.showToast({title:res.message, icon:"none"})
		}
	}

//导航栏左侧返回
	const clickLeftBack = () => {
		navBackCheck()
	}
	const navBackCheck = () =>{
		if(!data.scanInfo.length){
			uni.navigateBack({
				delta: 1
			});
			return  true
		}
		uni.showModal({
			title: t('smashRemoval.warmPrompt'),
			content: t('materials.unsubmittedDataIn'),
			success: function (res) {
				if (res.confirm) {
					//需要清除
					store.commit("clearTransferRawMaterialList");
					uni.navigateBack({
						delta: 1
					});
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		});
		
		return true
	}
	


	const submit=()=>{
		// console.log(data.scanInfo)
		if(!data.scanInfo.length){
			uni.showToast({title:'请扫描条码', icon:"none"})
			return
		}
		// 添加加载框
		uni.showLoading({
			title: 'loading',
			mask: true
		});
		submitTransfer(data.scanInfo).then(res=>{
			try {
				let inputParameter = JSON.stringify(data.scanInfo)
				let returnParameter = JSON.stringify(res)
				let operationPicture = '原材料转移'
				let callInterface = res.rquestUrl
				let opertionParmes = {
					inputParameter,
					returnParameter,
					operationPicture,
					callInterface,
					responseCode:res.status,//返回状态
					errorMessage:res.message,//错误信息
					isPass:res.status == 200 ? 'Y' : 'N',//是否成功 Y N
					operationType:OPERATION_COMMIT
				}
				basPdaOperationLogFn(opertionParmes)
			} catch (error) {
			}
			console.log(res)
			if(res.status==200){
				//隐藏加载框
				uni.hideLoading();
				uni.showToast({title:t('smashRemoval.submitSuccessfully')});//提交成功提示信息
				data.materialCode="";
				store.commit("clearTransferRawMaterialList");
			}else {
				uni.showToast({ title: res.message, icon: "none" });
			}
		})
	}

	// 删除 通过存储的数组id删除
	const deletList=(index,item)=>{
		// data.scanInfo.splice(index,1)
		try {
			let inputParameter = '无'
			let returnParameter = JSON.stringify(item)
			let operationPicture = '原材料转移'
			let callInterface = '无'
			let opertionParmes = {
				inputParameter,
				returnParameter,
				operationPicture,
				callInterface,
				responseCode:'无',//返回状态
				errorMessage:'无',//错误信息
				isPass:'Y',//是否成功 Y N
				operationType:OPERATION_DEL
			}
			basPdaOperationLogFn(opertionParmes)
		} catch (error) {
		}
 		store.commit("deleteTransferRawMaterialList",index)
	}
</script>

<style>

</style>
